<template>
    <v-layout column justify-center align-center>
        <v-flex xs12 sm8 md6 class="simoflex">
            <!-- <v-card class="simocard"> -->
            <div class="text-center">
                <!-- <logo /> -->
                <vuetify-logo />
            </div>
            <v-card-title class="headline">
                Welcome to the Vuetify + Nuxt.js template
            </v-card-title>
            <v-card-text>
                <!-- <p>
                        Vuetify is a progressive Material Design component
                        framework for Vue.js. It was designed to empower
                        developers to create amazing applications.
                    </p> -->
                <!-- <p>
                        For more information on Vuetify, check out the
                        <a href="https://vuetifyjs.com" target="_blank">
                            documentation </a
                        >.
                    </p>
                    <p>
                        If you have questions, please join the official
                        <a
                            href="https://chat.vuetifyjs.com/"
                            target="_blank"
                            title="chat"
                        >
                            discord </a
                        >.
                    </p>
                    <p>
                        Find a bug? Report it on the github
                        <a
                            href="https://github.com/vuetifyjs/vuetify/issues"
                            target="_blank"
                            title="contribute"
                        >
                            issue board </a
                        >.
                    </p> -->
                <p>
                    Thank you for developing with Vuetify and I look forward to
                    bringing more exciting features in the future.
                </p>
                <!-- <div class="text-xs-right">
                        <em><small>&mdash; John Leider</small></em>
                    </div> -->
                <!-- <hr class="my-3" /> -->
                <!-- <a href="https://nuxtjs.org/" target="_blank">
                        Nuxt Documentation
                    </a>
                    <br />
                    <a href="https://github.com/nuxt/nuxt.js" target="_blank">
                        Nuxt GitHub
                    </a> -->
                <div class="text-center">
                    <v-btn color="primary" nuxt to="/inspire">
                        潘姐开心快乐
                    </v-btn>
                </div>
            </v-card-text>
            <!-- </v-card> -->
        </v-flex>

        <v-container>
            <v-card class="card" v-for="item in blogList" :key="item.id">
                <v-card-title class="headline">{{ item.title }}</v-card-title>

                <v-card-text class="post">
                    <div>{{ item.content }}</div>
                </v-card-text>

                <v-card-actions>
                    <v-btn color="orange" text> Share </v-btn>

                    <v-btn color="orange" text> Explore </v-btn>
                </v-card-actions>
            </v-card>
        </v-container>
    </v-layout>
</template>

<script>
import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'

export default {
    async asyncData(content) {
        const data = {
            blogList: [],
        }
        const api = process.env.devApi
        await content.app.$axios
            .post(api + '/eps_article/getEps_articleList')
            .then((res) => {
                if (res.status === 200) {
                    const da = res.data
                    if (da.code === 200) {
                        data.blogList = da.data
                    }
                }
            })
        return data
    },

    data() {},

    components: {
        Logo,
        VuetifyLogo,
    },
}
</script>
<style>
.simocard {
    height: 100%;
    width: 100%;
}
.simoflex {
    height: 100%;
    width: 100%;
}
.card {
    background-color: rgba(255, 255, 255, 0) !important;
    &:not(:last-child) {
        border-bottom: 1px dotted #aaa;
    }
}
.card:not(:first-child) {
    margin-top: 10px !important;
}
.card-container {
    width: 90%;
}
.headline {
    justify-content: center;
}
.post {
    padding-bottom: 8px;
    font-size: 12px;
    &-class {
        margin: 0 6px;
        padding: 0 6px;
        border-left: 1px solid #aaa;
        border-right: 1px solid #aaa;
    }
}
</style>
